//点击搜索按钮
$('button').on('click', function () {
    //清除表单中按钮的默认提交事件
    event.preventDefault()
})

//点击主菜单
$('#mianNav .navbar-nav>li').on('click', function () {
    //设置自身为选中状态并清除其他选项的选中状态
    $(this).addClass('mianActive').siblings().removeClass('mianActive')
})

//点击二级菜单
$('main .navbar-nav>li').on('click', function () {
    //设置自身为选中状态并清除其他选项的选中状态
    $(this).addClass('active').siblings().removeClass('active')
})

//判断当前登录者权限等级
function Admin() {
    let AdminMess = getData('loginUser').AccessLevel
    if (AdminMess == 0) {
         //打开员工管理界面
         return 0
    }
    else if(AdminMess == 1){
         //没有权限查看员工数据，只能编辑个人信息
         return 1
    }
    else{
         return 2
    }
}
// 1.将数据动态渲染在页面上
let maxPage = 0                    //最大页
let nowPage = 1                    //当前页
let client=getData('client')
let JobIdVal                       //点击的该行删除按钮相对应的工号

// 数据分页
function showPage() {
    let pageLen = client.length
    let countPage = Math.ceil(pageLen / 10)
    maxPage = countPage
    $('#page').html(`
    <li class="pageUp"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
              
    <li  id="lastLi" class="pageDown"><a href="#" aria-label="Previous"><span aria-hidden="true">&raquo;</span></a></li>
    `)
    for (let i = 1; i <= countPage; i++){
         $('#lastLi').before(`
         <li class="everyPage"><a href="#">${i} <span class="sr-only">(current)</span></a></li>
         `)
    }
}
showPage()
// 给每一页添加绑定事件
$('.pagination').on('click', '.everyPage', function () {
    everyPage($(this).text())
})
function everyPage(clickNum) {
    nowPage = parseInt(clickNum)
    let start = (nowPage - 1) * 10
    let end = start + 9
    if (nowPage === maxPage) {
         end = client.length - 1
    }
    scjz(start, end)
    changeLi(nowPage)
}
changeLi(1)

//加载客户信息内容
function scjz(start, end) {
    $("#table_body").html('')
    for (let i = start; i <= end; i++) {
        $("#table_body").append(`<tr>
                    <td>${client[i].clientName}</td>
                    <td>${client[i].sex}</td>
                    <td>${client[i].tel}</td>
                    <td>${client[i].idNo}</td>
                    <td>${client[i].roomNumber}</td>
                    <td>${client[i].remarks}</td>
                    <td><button class='my_but1 tankuang' id="tankuang3"><span class="icon iconfont">&#xe698;</span></button>
                    <button  class='my_but2' ><span class="icon iconfont" data-toggle="modal" data-target="#delhint">&#xe648;</span></button>
                    </td>
               </tr>`);
    }
}
scjz(0, 9)

//下一页
$('#page').on('click', '.pageDown', function () {
    if (nowPage < maxPage) {
         everyPage(++nowPage)
    }
})
// 上一页
$('#page').on('click', '.pageUp', function () {
    if (nowPage > 1) {
         everyPage(--nowPage)
    }
})
// 按钮变色
function changeLi(a) {
    for (let i = 0; i < $('.everyPage').length; i++) {
         $('.everyPage').eq(i).removeClass('active')
    }
    $('.everyPage').eq(a).addClass('active')
}
// 新增弹框提示函数
$('#tankuang').click(function () {
    $('#myModal').modal('show')
    $('.message1').val('')
    $('.message2').val('')
    $('.message3').val('')
    $('.message4').val('')
    $('.message5').val('')
    $('.message6').val('')
})

//确认新增
$('#affirm').click(function () {
    let message1 = $('.message1').val()
    let message2 = $('.message2').val()
    let message3 = $('.message3').val()
    let message4 = $('.message4').val()
    let message5 = $('.message5').val()
    let message6 = $('.message6').val()
    let message0 = client[client.length - 1].id
    let mymessage = parseInt(message0.slice(1, 9)) + 1
    let newobj = {
        id: 'c' + mymessage,
        clientName: message1,
        sex: message2,
        tel: message3,
        idNo: message4,
        roomNumber: message5,
        remarks: message6
    }
    client.push(newobj)
    delData(client)
    saveData('client', client)
    //新增后重新加载页面
    start = current * 10 - 10     //开始
    end = current * 10 - 1        //结尾
    if (current === page) {
        if (client.length - 1 <= current * 10 - 1) {
            end = client.length - 1
        }
    }
    scjz(start, end)
    //新增后重新加载分页
    page = Math.ceil(client.length / 10)
    paging()
})
let sanchuid = 0

$('#table_body').on('click', '.my_but2', function () {
    let scdq = $(this).parents('tr').children('td').eq(3).text()
    sanchuid = scdq
})
//删除客户信息
$('#confirm').click(function () {
    for (let i = 0; i < client.length; i++) {
        if (client[i].idNo === sanchuid) {
            client.splice(i, 1)
            delData(client)
            saveData('client', client)
            getData(client)

        }
    }
    //删除后重新加载页面
    start = nowPage * 10 - 10     //开始
    end = nowPage * 10 - 1        //结尾
    if (nowPage === maxPage) {
        if (client.length - 1 <= nowPage * 10 - 1) {
            end = client.length - 1
        }
    }
    scjz(start, end)
    //删除后重新加载分页
    page = Math.ceil(client.length / 10)
    everyPage(nowPage)
    showPage()
})

//修改弹框弹出
$('#table_body').on('click', '.my_but1', function () {
    $('#mo_box').css('display', 'block')
    let dqid = $(this).parents('tr').children('td').eq(0).text()
    let dqclientName = $(this).parents('tr').children('td').eq(1).text()
    let dqsex = $(this).parents('tr').children('td').eq(2).text()
    let dqtel = $(this).parents('tr').children('td').eq(3).text()
    let dqidNo = $(this).parents('tr').children('td').eq(4).text()
    let dqroomNumber = $(this).parents('tr').children('td').eq(5).text()
    let dqremarks = $(this).parents('tr').children('td').eq(6).text()
    $(".messagea").val(dqclientName)
    $(".messageb").val(dqsex)
    $(".messagec").val(dqtel)
    $(".messaged").val(dqidNo)
    $(".messagee").val(dqroomNumber)
    $(".messagef").val(dqremarks)

    $('.affirm2').click(function () {
        let dqclientName2 = $(".messagea").val()
        let dqsex2 = $(".messageb").val()
        let dqtel2 = $(".messagec").val()
        let dqidNo2 = $(".messaged").val()
        let dqroomNumber2 = $(".messagee").val()
        let dqremarks2 = $(".messagef").val()
        for (let i = 0; i < client.length; i++) {
            if (client[i].id === dqid) {
                client[i].clientName = dqclientName2
                client[i].sex = dqsex2
                client[i].tel = dqtel2
                client[i].idNo = dqidNo2
                client[i].roomNumber = dqroomNumber2
                client[i].remarks = dqremarks2
            }
        }
        delData(client)
        saveData('client', client)
        $('#mo_box').css('display', 'none')
        start = current * 10 - 10     //开始
        end = current * 10 - 1        //结尾
        if (current === page) {
            if (client.length - 1 <= current * 10 - 1) {
                end = client.length - 1
            }
        }
        scjz(start, end)
        console.log(client);
    })

})

//取消
$('.cancel ').click(function () {
    $('#mo_box').css('display', 'none')
})
//搜索类
let searchType = 'option1'
//搜索框提示词
$('#typeOption').click(function () {
    searchType = $(this).val()

    if ($(this).val() == 'option1') {
        $('#OptionType').attr('placeholder', '请输入姓名')
    }
    else if ($(this).val() == 'option2') {
        $('#OptionType').attr('placeholder', '请输入联系方式')
    } else if ($(this).val() == 'option3') {
        $('#OptionType').attr('placeholder', '请输入身份证号')
    }
})
//搜索
$("#djsearch").click(function () {
    let input_box = $('#OptionType').val()
    let zbd=1
    if(searchType === 'option1'){
        for (let i = 0; i < client.length; i++) {
            if (client[i].clientName == input_box) {
                $("#table_body").html('')
                $("#table_body").append(`<tr>
                    <td>${client[i].id}</td>
                    <td>${client[i].clientName}</td>
                    <td>${client[i].sex}</td>
                    <td>${client[i].tel}</td>
                    <td>${client[i].idNo}</td>
                    <td>${client[i].roomNumber}</td>
                    <td>${client[i].remarks}</td>
                    <td><button class='my_but1 tankuang' id="tankuang3"><span class="icon iconfont">&#xe698;</span></button>
                    <button  class='my_but2' ><span class="icon iconfont" data-toggle="modal" data-target="#delhint">&#xe648;</span></button>
                    </td>
               </tr>`);
               break
            }
           zbd=zbd+1
        }
        if(zbd>client.length){
            alert('没有此客户')
            zbd=1
           }
    }else if(searchType === 'option2'){
        for (let i = 0; i < client.length; i++) {
            if (client[i].tel == input_box) {
                $("#table_body").html('')
                $("#table_body").append(`<tr>
                    <td>${client[i].id}</td>
                    <td>${client[i].clientName}</td>
                    <td>${client[i].sex}</td>
                    <td>${client[i].tel}</td>
                    <td>${client[i].idNo}</td>
                    <td>${client[i].roomNumber}</td>
                    <td>${client[i].remarks}</td>
                    <td><button class='my_but1 tankuang' id="tankuang3"><span class="icon iconfont">&#xe698;</span></button>
                    <button  class='my_but2' ><span class="icon iconfont" data-toggle="modal" data-target="#delhint">&#xe648;</span></button>
                    </td>
               </tr>`);
               break
            }
           zbd=zbd+1
        }
        if(zbd>client.length){
            alert('没有此客户')
            zbd=1
           }
    }else if(searchType === 'option3'){
        for (let i = 0; i < client.length; i++) {
            if (client[i].idNo == input_box) {
                $("#table_body").html('')
                $("#table_body").append(`<tr>
                    <td>${client[i].id}</td>
                    <td>${client[i].clientName}</td>
                    <td>${client[i].sex}</td>
                    <td>${client[i].tel}</td>
                    <td>${client[i].idNo}</td>
                    <td>${client[i].roomNumber}</td>
                    <td>${client[i].remarks}</td>
                    <td><button class='my_but1 tankuang' id="tankuang3"><span class="icon iconfont">&#xe698;</span></button>
                    <button  class='my_but2' ><span class="icon iconfont" data-toggle="modal" data-target="#delhint">&#xe648;</span></button>
                    </td>
               </tr>`);
               break
            }
           zbd=zbd+1
        }
        if(zbd>client.length){
            alert('没有此客户')
            zbd=1
           }
    }
})
$('.paging_box').on('click','.blue',function(){
    let font= $(this).text()
    console.log(font);
    let mychil= $('.paging_box').children('div')
    console.log(mychil);
    if(font== '<<'){
        $('.blue').css('background-color','white')
        $('.blue').css('color','#2A7DC3')
       $(mychil[0]) .css('background-color','#2A7DC3')
       $(mychil[0]) .css('color','white')
    }else if(font== '>>'){
        $('.blue').css('background-color','white')
        $('.blue').css('color','#2A7DC3')
        $(mychil[mychil.length-1]) .css('background-color','#2A7DC3')
        $(mychil[mychil.length-1]) .css('color','white')
    }else{
        $('.blue').css('background-color','white')
        $('.blue').css('color','#2A7DC3')
        $(mychil[parseInt(font)+1]) .css('background-color','#2A7DC3')
        $(mychil[parseInt(font)+1]) .css('color','white')
    }
})


// 显示当前登录者头像及工号
showHeadImgId()
      
// 头部退出按钮
$('#quit').find('button').click(function(){
     open('./login.html','_self')
}) 

// 显示当前登录者头像及工号
function showHeadImgId(){
let useData = getData('staff')
let loginUser = getData('loginUser').jobNumber
for(let i=0;i<useData.length;i++){
    if(useData[i].jobNumber == loginUser){
         $('.portrait').find('img').attr('src',useData[i].headPortrait)
         $('#quit').find('.jobId').html(useData[i].jobNumber)
         }

    }
}